<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            height: 500px;
            margin: 30px auto;
            background: #000;
            position: relative;
        }

        .plane {
            width: 80px;
            height: 60px;
            background: url(img/plane.png) no-repeat center center;
            background-size: 100% 100%;
            position: absolute;
            bottom: 10px;
            left: calc(50% - 40px);
        }

        .bullet {
            height: 20px;
            width: 10px;
            background: gold;
            position: absolute;
            border-radius: 50% 50% 0 0;
        }

        .hater {
            width: 60px;
            height: 40px;
            background: url(img/plane.png) no-repeat center center;
            background-size: 100% 100%;
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>
    <audio src="audio/bg.m4a" id="player"></audio>
    <audio src="audio/boom.mp3" id="boom"></audio>
    <h1>得分:
        <span id="score" style="color:red">0</span>
    </h1>
    <div class="container">
        <div class="plane"></div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        var calcPostion = (left, top, maxLeft, maxTop, minLeft = 0, minTop = 0) => {
            if (left < minLeft) left = minLeft
            else if (left > maxLeft) left = maxLeft
            if (top < minTop) top = minTop
            else if (top > maxTop) top = maxTop
            return {
                left, top
            }
        }

        $(function () {
            var player = document.getElementById("player")
            $(window).on('keydown', function () {
                player.play()
            })
        })

        $(window).on('keydown', function (e) {
            // console.log(e.keyCode)
            var t = $(".plane").position().top
            var l = $(".plane").position().left
            switch (e.keyCode) {
                case 38:
                    //上
                    t -= 10
                    break;
                case 40:
                    //下
                    t += 10
                    break;
                case 37:
                    //左
                    l -= 10
                    break;
                case 39:
                    //右
                    l += 10
                    break;
                case 74:
                    shoot()
                    break;
            }

            var maxLeft = $(".container").innerWidth() - $(".plane").innerWidth()
            var maxTop = $(".container").innerHeight() - $(".plane").innerHeight()
            //计算真正位置，不允许出画面
            var position = calcPostion(l, t, maxLeft, maxTop)
            $(".plane").css({
                "left": position.left,
                "top": position.top
            })
        });

        var endTime = new Date()
        var shoot = () => {
            if (new Date() - endTime < 300) return;
            var top = $('.plane').position().top - 20;
            var bullet = $('<div class="bullet"></div>')
            $('.container').append(bullet);
            //让子弹出现在飞机中间位置，如果要简单点可以直接写数值
            var left = $(".plane").position().left + $(".plane").innerWidth() / 2 - bullet.innerWidth() / 2
            bullet.css({ left, top })
            endTime = new Date()
        }

        var timer = setInterval(() => {
            $('.bullet').each(function(i,ele){
                $(ele).css('top',$(ele).position().top - 10)
                if($(ele).position().top < 0){
                    $(ele).remove()
                }
            })
        }, 50)

        setInterval(() => {
            var hater = $('<div class="hater"></div>').css('top', 0);
            $('.container').append(hater)
            var left = Math.round(Math.random() * ($('.container').innerWidth() - $('.hater').innerWidth()))
            hater.css('left', left);

            var timer = setInterval(() => {
                hater.css('top', hater.position().top + 1)
                if (hater.position().top > $('.container').innerHeight() - hater.innerHeight()) {
                    hater.remove()
                    clearInterval(timer)
                }
            }, 30)
        }, 1000)


        // // 碰撞检测
        setInterval(()=>{
            $('.hater').each(function(i,ele){
                $('.bullet').each(function(j,ele1){
                    if((($(ele1).position().left > $(ele).position().left) && ($(ele1).position().left < $(ele).position().left+$(ele).innerWidth()) && ($(ele1).position().top > $(ele).position().top) && ($(ele1).position().top < $(ele).position().top+$(ele).innerHeight())) || (($(ele1).position().left+$(ele1).innerWidth() > $(ele).position().left) && ($(ele1).position().left+$(ele1).innerWidth() < $(ele).position().left+$(ele).innerWidth()) && ($(ele1).position().top > $(ele).position().top) && ($(ele1).position().top < $(ele).position().top+$(ele).innerHeight()))){
                        console.log('碰撞了')
                        $(ele).remove()
                        $(ele1).remove()
                        $('#score').text(parseInt($('#score').text())+1)
                        var boom = document.getElementById("boom")
                        boom.play()
                    }
                })
            })
        },50)

    </script>
</body>

</html>